<template>
  <template v-if="visible" ref="el">
    <teleport to="body">
      <div class="zeus-message" :class="{ center }">{{ message }}</div>
    </teleport>
  </template>
</template>

<script lang="ts">
import { onMounted, ref } from 'vue'
export default {
  name: 'message',
  setup(props, context) {
    const visible = ref<Boolean>(false)
    const center = ref<Boolean>(false)
    const message = red<String>('')
    const duration = ref<Number>(3000)
    const type = ref<String>('info')
    const el = ref<HTMLDivElement>(null)
    const setTimer = () => {
      setTimeout(() => {
        close()
      }, duration)
    }
    const close = () => {
      visible.value = false
      el.parentNode.removeChild(el)
    }
    onMounted(() => {
      setTimer()
    })
    return {
      visible,
      message,
      el,
      center,
    }
  },
}
</script>

<style lang="scss">
.zeus-message {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 15px;
  background: #f0f9eb;
  color: #67c23a;
  min-width: 380px;
  z-index: 30;
  font-size: 14px;
  font-weight: 400;
  border: 1px solid #e5f8da;
  border-radius: 4px;
  &.center {
    text-align: center;
  }
}
</style>
